<script lang='ts' setup>
	import {
		theme
	} from '@/store/module/theme'
	import {
		ref,
		onBeforeMount
	} from 'vue'


	const list = ref([]);

	onBeforeMount(() => {
		for (let i = 0; i < 20; i++) {
			list.value.push({
				id: i,
				date: '01月25日',
				week: '星期三',
				weather: '晴',
				content: '今天天好冷，风刮在脸上，冻得人生疼，我沿着街灯一个人走了好久',
				background: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3'
				]
			});
		}
	});
</script>


<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<view class="p-[20rpx] bg-[transparent]">
			<view class="date text-[18px] font-bold w-full text-[var(--text-color)]  p-[10rpx] bg-[var(--bg-color)]">
				<view class="">
					早上好！<text>linhan</text>
				</view>
				<view class="">
					人生就像登山，我们一步步慢慢来!
				</view>
			</view>
			<view class="w-full h-auto mt-[30rpx] px-[30rpx] py-[20rpx] bg-[#f2f2f2] rounded-[12rpx]" v-for="i in list"
				:key="i.id">
				<view class="head w-full h-[60rpx] justify-between flex items-center">
					<view class="flex items-center">
						<view class="text-[18px] font-bold">
							{{i.date}}
						</view>
						<view class="text-[16px] font-bold mx-[20rpx]">
							{{i.week}}
						</view>
						<view class="text-[16px] font-bold">
							{{i.weather}}
						</view>
					</view>
				</view>
				<!-- content -->
				<view class="text-[14px] ">
					<u-read-more showHeight="90" textIndent="0" toggle closeText="展开" :shadowStyle="{
						backgroundImage:'none'
					}">
						<rich-text :nodes="i.content"></rich-text>
					</u-read-more>
					<u-album :urls="i.background"></u-album>
				</view>
			</view>
		</view>
	</view>
</template>